<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    const canvas = document.getElementById('canvas')
    canvas.width = window.innerWidth - 10
    canvas.height = window.innerHeight - 10
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    })

    const points = []

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        draw() {
            ctx.beginPath()
            ctx.arc(this.x, this.y, 3, 0, 2 * Math.PI)
            ctx.strokeStyle = '#000'
            ctx.fillStyle = '#000'
            ctx.stroke()
            ctx.fill()
        }

        moveTo(tx, ty) {
            const delay = 500
            const sx = this.x
            const sy = this.y
            const xSpeed = (tx - sx) / delay
            const ySpeed = (ty - sy) / delay
            const startTime = Date.now()
            const _move = () => {
                const t = Date.now() - startTime
                const cx = sx + xSpeed * t
                const cy = sy + ySpeed * t
                this.x = cx
                this.y = cy
                if (t >= delay) {
                    return
                }
                requestAnimationFrame(_move)
            }
            _move()
        }
    }

    function getRandomPointOnCircle(x, y, radius) {
        const angle = Math.random() * Math.PI * 2;
        const newX = x + radius * Math.cos(angle);
        const newY = y + radius * Math.sin(angle);
        return { x: newX, y: newY };
    }


    for (let i = 0; i < 50; i++) {
        const { x, y } = getRandomPointOnCircle(canvas.width / 2, canvas.height / 2, 400);
        const point = new Point(x, y)
        points.push(point)
    }

    function draw() {
        // ctx.clearRect(0, 0, canvas.width, canvas.height)
        points.forEach(item => {
            item.draw()
        })
        update()
        requestAnimationFrame(draw)
    }

    function getDateTime() {
        return new Date().toLocaleTimeString('zh-CN');
    }

    let timeText = getDateTime()
    function update() {
        if (timeText === getDateTime()) {
            return
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        const { width, height } = canvas
        timeText = getDateTime()
        ctx.fillStyle = 'rgba(240,240,240,0.1)'
        ctx.fillStyle = '#000'
        ctx.font = "bold 50px FX-LED"
        // ctx.fillText(timeText, (width - ctx.measureText(timeText).width) / 2, height / 2)
        ctx.fillText('受命于天既寿永昌', (width - ctx.measureText(timeText).width) / 2, height / 2)
        const imgData = getImagePoints()
        console.log(imgData)
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        for (let i = 0; i < imgData.length; i++) {
            let p = points[i]
            if (!p) {
                p = new Point()
                points.push(p)
            }
            const [x, y] = imgData[i]
            p.moveTo(x, y)
        }
        console.log(points)
    }

    function getImagePoints() {
        const { width, height, data } = ctx.getImageData(0, 0, canvas.width, canvas.height)
        const imgData = []
        for (let i = 0; i < width; i++) {
            for (let j = 0; j < height; j++) {
                const index = (i + j * width) * 4
                const r = data[index]
                const g = data[index + 1]
                const b = data[index + 2]
                const a = data[index + 3]
                if (r === 0 && g === 0 && b === 0 && a === 1) {
                    imgData.push([i, j])
                }
            }
        }
        return imgData
    }

    draw()

    // points.forEach(item => {
    //     item.moveTo(Math.random() * 100, Math.random() * 100)
    // })
</script>

</html>